<template>
  <div style="padding-top:46px">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="确认支付密码" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <p>请再次输入</p>
    <!-- 密码输入框 -->
    <van-password-input :value="value" @focus="showKeyboard = true"/>
    <p>
      <button>确定</button>
    </p>
    <!-- 数字键盘 -->
    <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false"/>
  </div>
</template>
<script>
  export default {
    name: 'setconfirmpassword',
    data() {
      return {
        value: '',
        showKeyboard: true
      };
    },

    methods: {
      onInput(key) {
        this.value = (this.value + key).slice(0, 6);
      },
      onDelete() {
        this.value = this.value.slice(0, this.value.length - 1);
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="less" scoped>
  p {
    padding-left: 30px;
    text-align: center;
    font-size: 24px;
    color: #999999;
  }

  button {
    width: 690px;
    height: 90px;
    background-color: #fbcb82;
    border: none;
    border-radius: 50px;
    font-size: 32px;
    color: #ffffff;
    margin-top: 52px;
  }
</style>
